import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, ScrollView, Button } from '@tarojs/components'
import { AtList, AtListItem, AtGrid, AtInput, AtMessage, AtActionSheet, AtActionSheetItem } from 'taro-ui'
import './dongtaixiangqing.scss'
import reactMixin from 'react-mixin'
import myJs from './dongtaixiangqingJs.js'
import app from '../../../../main.js'

export default class Dongtaixiangqing extends Component {
    config = {
        navigationBarTitleText: '动态详情'
    }
    constructor() {
        super(...arguments);
        this.state = this.getData();

    }

    init() {
        this.getDongtai();
        // this.listComments();
    };

    onReachBottom() {
        // 分页逻辑,下拉到底部触发时间
        if (this.state.total > this.state.commentss.offset) {
            this.state.commentss.offset += this.state.commentss.length;
            this.listComments();
        }
    }
    go(url) {
        app.navigateTo(url);
    }

    onShareAppMessage(res = this) {
        if (res.from === 'button') {
            return {
                title: '',
                path: res.webViewUrl,
                imageUrl: '',
            }
        } else {
            return {
                title: '',
                path: res.webViewUrl,
                imageUrl: '',
            }
        }
    }

    clickFavour(item, num) {
        if (num == 0) {
            var me = this;
            var dongtai = me.state.dongtai;
            app.post("web/dynamic_topic/likeDynamic", { chat_id: me.state.id }, function (res) {
                var like = res.data.result;
                if (like.is_like == '已点赞') {
                    dongtai.likeNum += 1;
                    dongtai.is_like = '已点赞'
                } else {
                    dongtai.likeNum -= 1;
                    dongtai.is_like = '未点赞'
                }
                me.setState({
                    dongtai: dongtai
                })
            });
        }
        if (num == 1) {
            var me = this;
            var dongtai = me.state.dongtai;
            app.post("web/dynamic_topic/collectDynamic", { chat_id: me.state.id }, function (res) {
                var collect = res.data.result;
                if (collect.is_collect == '已收藏') {
                    dongtai.collectNum += 1;
                    dongtai.is_collect = '已收藏'
                } else {
                    dongtai.collectNum -= 1;
                    dongtai.is_collect = '未收藏'
                }
                me.setState({
                    dongtai: dongtai
                })
            });
        }
        if (num == 2) {
            var me = this;
            var content = me.state.content;
            var comment_id = me.state.comment_id;
            var replied_id = me.state.replied_id;
            var placeholder = me.state.placeholder;
            content = '';
            comment_id = 0;
            replied_id = '';
            placeholder = '评论';
            this.setState({
                content: content,
                comment_id: comment_id,
                replied_id: replied_id,
                placeholder: placeholder
            })
        }
        if (num == 3) {
            this.setState({
                isShare: true
            })
        }
    }
    openShare(v) {
        this.setState({
            isShare: v
        });
    }
    // 微信转发
    onShareAppMessage(res = this) {
        console.log("res", res)
        if (res.from === 'button') {
            // 来自页面内转发按钮
            console.log("target", res.target)
            if (res.target.id == '123') {
                return {
                    title: '动态',
                    path: res.webViewUrl,
                    imageUrl: '',
                }
            }
        }
        // this.state.transpondNum
        this.shareNumber();
        return {
            title: '病历详情',
            imageUrl: app.getPath('img/share_case.png'),
            path: 'pages/dynamic/pages/dongtaixiangqing/dongtaixiangqing?chat_id=' + this.state.id
        }
    }
    shareNumber() {
        console.log("分享时间")
        let me = this
        let data = { chat_id: this.state.id }
        app.get('web/dynamic_topic/transPondNumber', data, function (res) {
            console.log(res.data.result)
            let dongtai = me.state.dongtai
            dongtai.transpondNum = res.data.result
            me.setState({
                dongtai: dongtai,
                isShare: false
            })
        })
    }


    submitComment() {
        var me = this;
        var data = {
            chat_id: me.state.id,
            comment_id: me.state.comment_id,
            content: me.state.content,
            replied_id: me.state.replied_id
        };

        if (me.state.content != '' && me.state.content != 'undefined') {
            app.post("web/dynamic_topic/publishComment", data, function (res) {
                var status = res.data.status;
                if (status == 200) {
                    me.state.content = '';
                    me.state.comment_id = 0;
                    me.state.replied_id = '';
                    me.state.placeholder = '评论';
                    me.listComment()
                }
            });
        } else {
            Taro.atMessage({
                'message': '请输入评论内容',
                'type': 'info'
            })
        }

    }

    handleClick(id, reply_id, reply_name) {
        var content = this.state.content;
        var comment_id = this.state.comment_id;
        var replied_id = this.state.replied_id;
        var placeholder = this.state.placeholder;
        content = '';
        comment_id = id;
        replied_id = reply_id;
        placeholder = '@' + reply_name;

        this.setState({
            content: content,
            comment_id: comment_id,
            replied_id: replied_id,
            placeholder: placeholder
        })
    }

    showImg(img) {
        app.prviewImage(img, this.state.dongtai.images)
    }

    toCaseDetail(content) {
        try {
            var arr = content.split(':');
            var id = arr[0].substr(4);
            app.navigateTo('/pages/doctorpages/caseDetail/caseDetail?id='+id);
        } catch (error) {
            console.log('error', error);
        }
    }

    render() {
        let dianzan = app.imageUri + 'img/icon-dianzan.png'
        let nodianzan = app.imageUri + 'img/icon-dianzan-kong.png'
        let shoucan = app.imageUri + 'img/icon-shoucan-man.png'
        let noshoucan = app.imageUri + 'img/icon-shoucan-kong.png'
        return (
            <View className='dongtaixiangqing'>
                <View className=' class_0'>
                    <AtList>
                        <AtListItem hasBorder={false} title={this.state.dongtai.name} note={this.state.dongtai.hospital} extraText={this.state.dongtai.created_at} thumb={app.getPath(this.state.dongtai.head_image)}></AtListItem>
                    </AtList>
                    <View className='class_1'>
                        <View className='at-article '>
                            <View className='at-article__p class_2'>
                            {
                                this.state.dongtai.content_type == '病历' ? 
                                (
                                    <Text onClick={this.toCaseDetail.bind(this, this.state.dongtai.content)} style="text-decoration-line: underline;">
                                        {this.state.dongtai.content.substr(0,4)+'   '+this.state.dongtai.content.substring(this.state.dongtai.content.indexOf(':')+1, this.state.dongtai.content.length)}
                                    </Text>
                                ) : 
                                (
                                    this.state.dongtai.content
                                )
                            }
                        </View>
                        </View>
                        <View className='class_3'>
                            {
                                this.state.dongtai.images.map((items, index) => {
                                    return (
                                        this.state.dongtai.media_type == '图片' ?
                                            // <Image key={index} mode='aspectFit' className='class_4' src={items} onClick={this.showImg.bind(this,items)}></Image>
                                            <Image key={index} mode className='class_4' src={items} onClick={this.showImg.bind(this, items)}></Image>
                                            : this.state.dongtai.media_type == '视频' ?
                                                <video controls={true} initial-time='0.01' src={items}></video>
                                                : ''
                                    )
                                })
                            }
                        </View>
                    </View>
                    <AtGrid mode='rect' hasBorder={false} columnNum={4} onClick={this.clickFavour.bind(this)} data={[
                        { image: this.state.dongtai.is_like == '已点赞' ? dianzan : nodianzan, value: this.state.dongtai.likeNum },
                        { image: this.state.dongtai.is_collect == '已收藏' ? shoucan : noshoucan, value: this.state.dongtai.collectNum },
                        { image: app.imageUri + 'img/icon-comment-kong.png', value: this.state.newcommentNum || this.state.dongtai.commentNum },
                        { image: app.imageUri + 'img/icon-zhuangfa.png', value: this.state.dongtai.transpondNum }]}>
                    </AtGrid>
                </View>
                <AtActionSheet isOpened={this.state.isShare} cancelText='取消' title='' onClose={this.openShare.bind(this, false)} onCancel={this.openShare.bind(this, false)}>
                    <AtActionSheetItem>
                        <Button id='123' open-type='share' plain className='btn_share_weixin'>分享至微信</Button>
                    </AtActionSheetItem>
                    {/* <AtActionSheetItem onClick={this.toshareDongTai.bind(this)}>
                    分享至动态
                </AtActionSheetItem> */}
                </AtActionSheet>

                <View className='class_8'>
                    {
                        this.state.commentss.items.map((item, index) => {
                            return (
                                <View className=' class_9'>
                                    <AtList hasBorder={false}>
                                        <AtListItem hasBorder={false} onClick={this.handleClick.bind(this, item.id, '', item.reply_name)} title={item.reply_name} note={item.reply_hospital} extraText={item.created_at} thumb={app.getPath(item.reply_head_image)}></AtListItem>
                                    </AtList>
                                    <View className=' class_10'>
                                        <View className='at-article '>
                                            <View className='at-article__p class_11'>{item.content}</View>
                                        </View>
                                        {item.replied != '' ?
                                            <View className=' class_12'>
                                                {
                                                    item.replied.map((items, index) => {
                                                        return (
                                                            items.replied_name == '' ?
                                                                <View className='pinglun'>
                                                                    <Text className=' class_13'>{items.reply_name}</Text>
                                                                    <Text className=' class_14'>：{items.content}</Text>
                                                                </View>
                                                                : ''
                                                        )
                                                    })
                                                }
                                                <View>
                                                    {item.repliedNum == 0 ? '' :
                                                        <Text className=' class_17' onClick={this.go.bind(this, '../pinglunliebiao/pinglunliebiao?chat_id=' + this.state.dongtai.id + '&comment_id=' + item.id)}>共{item.repliedNum}条记录></Text>
                                                    }
                                                </View>
                                            </View>
                                            : ''
                                        }
                                        <View className='class_27'>
                                            <Text cursor-spacing='0' className='class_28' onClick={this.handleClick.bind(this, item.id, '', item.reply_name)}>回复</Text>
                                        </View>
                                    </View>
                                </View>
                            )
                        })
                    }
                </View>
                <View className='blank-box'></View>
                <View className='send'>
                    <AtInput
                        name='content'
                        type='text'
                        value={this.state.content}
                        onChange={this.handleChange.bind(this)}
                        className='input'
                        cursorSpacing={12}
                        placeholder={this.state.placeholder}
                        placeholderStyle='color:white'
                    />
                    <Image onClick={this.submitComment.bind(this)} src={app.imageUri + 'img/send.png'} className='send-btn'></Image>
                </View>
                <View>
                    <AtMessage />
                </View>
            </View>
        );
    }
}

reactMixin.onClass(Dongtaixiangqing, myJs);